<template>
  <page-layout title="实缴账单明细">
    <a-card>
      <div class="wrapper">
        <a-row type="flex" justify="start" align="middle">
          <a-col :span="24">
            <a-form layout="inline">
              <a-form-item label="月份">
                <a-month-picker placeholder="请选择月份" @change="monthPickerOnChange" />
              </a-form-item>
              <a-form-item label="项目">
                <a-select v-model="iptform.pro" show-search allow-clear placeholder="请选择项目" option-filter-prop="children" style="width: 200px" @focus="proHandleFocus" :loading="proSelectLoading">
                  <a-select-option v-for="(value, key) in proNameDataObj" :key="key">
                    {{value}}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="城市">
                <Vcity class="billCity" before="" :citydata="cityData" @selectDepCityFn="selectDepCity" />
              </a-form-item>
              <a-form-item label="供应商">
                <a-select v-model="iptform.supplier" allow-clear show-search placeholder="请选择供应商" option-filter-prop="children" style="width: 200px" @focus="supplierHandleFocus">
                  <a-select-option v-for="item in supplierNameArr" :key="item.id">
                    {{item.fullName}}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item>
                <a-radio :checked="true">实缴账单</a-radio>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" @click="onSearch">
                  <a-icon type="search" />查询
                </a-button>
              </a-form-item>
            </a-form>
          </a-col>
          <a-col :span="24" style="margin-top: 20px;">
            <a-button type="primary" icon="download" :loading="uploadFileLoading" @click="downloadBtnClkFn" :disabled="isDisabled">数据下载</a-button>
            <span class="tips">* 数据下载前请选择月份和项目</span>
          </a-col>
        </a-row>

        <div style="margin-top: 30px;">
          <a-row style="margin-bottom:16px">
            <a-col :span="24">
              <a-radio-group name="radioGroup" :default-value="1" @change="radioChangeFn">
                <a-radio :value="1">
                  汇缴明细
                </a-radio>
                <a-radio :value="2">
                  调整明细
                </a-radio>
              </a-radio-group>
            </a-col>
          </a-row>
          <template>
            <a-table :columns="columns" :data-source="data" bordered size="middle" :loading="loading" :scroll="{ x: 1000 }" :pagination="{              
              current: pageNum, 
              pageSize: pageSize,
              total: total,
              showSizeChanger: true,
              showLessItems: true,
              showQuickJumper: true,
              showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
              onChange: onPageChange,
              onShowSizeChange: onSizeChange,
            }">
              <template v-for="col in columnsArr" :slot="col" slot-scope="text">
                {{text ? text : '-'}}
              </template>
            </a-table>
          </template>
        </div>
      </div>
    </a-card>
  </page-layout>
</template>

<script>
import Vcity from '@/components/vcity/index'
import PageLayout from "@/layouts/PageLayout";
import { getAllCityApi, proNameBaseSelectApi, findSupplierInfoApi, getRemittanceDetailsPageApi, getAdjustmentDetailsPageApi } from '@/services/socialSecurityFund'
import { exportRemittanceDetailsApi } from '@/services/os'

let _idx = 1

const columns = [
  {
    title: '签约主体',
    dataIndex: 'signEntityName',
    key: 'signEntityName',
    width: 100,
    fixed: 'left',
    scopedSlots: { customRender: 'signEntityName' },
  },
  {
    title: '项目',
    dataIndex: 'projectName',
    key: 'projectName',
    width: 100,
    scopedSlots: { customRender: 'projectName' },
  },
  {
    title: '业务类型',
    dataIndex: 'projectContactType',
    key: 'projectContactType',
    width: 100,
    scopedSlots: { customRender: 'projectContactType' },
  },
  {
    title: '所属部门',
    dataIndex: 'deptName',
    key: 'deptName',
    width: 100,
    scopedSlots: { customRender: 'deptName' },
  },
  {
    title: '缴纳性质',
    dataIndex: 'type',
    key: 'type',
    width: 100,
    scopedSlots: { customRender: 'type' },
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
    width: 100,
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '身份证号',
    dataIndex: 'idCard',
    key: 'idCard',
    width: 100,
    scopedSlots: { customRender: 'idCard' },
  },
  {
    title: '缴纳城市',
    dataIndex: 'paymentCityName',
    key: 'paymentCityName',
    width: 100,
    scopedSlots: { customRender: 'paymentCityName' },
  },
  {
    title: '入职日期',
    dataIndex: 'entryDate',
    key: 'entryDate',
    width: 100,
    scopedSlots: { customRender: 'entryDate' },
  },
  {
    title: '离职日期',
    dataIndex: 'dimissionDate',
    key: 'dimissionDate',
    width: 100,
    scopedSlots: { customRender: 'dimissionDate' },
  },
  {
    title: '账单所属月',
    dataIndex: 'billMonth',
    key: 'billMonth',
    width: 100,
    scopedSlots: { customRender: 'billMonth' },
  },
  {
    title: '福利所属月',
    dataIndex: 'boonMonth',
    key: 'boonMonth',
    width: 100,
    scopedSlots: { customRender: 'boonMonth' },
  },
  {
    title: '养老',
    children: [
      {
        title: '养老基数',
        dataIndex: 'companyPensionBase',
        key: 'companyPensionBase',
        width: 100,
        scopedSlots: { customRender: 'companyPensionBase' },
      },
      {
        title: '公司比例',
        dataIndex: 'companyPensionPercent',
        key: 'companyPensionPercent',
        width: 100,
        scopedSlots: { customRender: 'companyPensionPercent' },
      },
      {
        title: '公司金额',
        dataIndex: 'companyPensionAmt',
        key: 'companyPensionAmt',
        width: 100,
        scopedSlots: { customRender: 'companyPensionAmt' },
      },
      {
        title: '个人比例',
        dataIndex: 'personPensionPercent',
        key: 'personPensionPercent',
        width: 100,
        scopedSlots: { customRender: 'personPensionPercent' },
      },
      {
        title: '个人金额',
        dataIndex: 'personPensionAmt',
        key: 'personPensionAmt',
        width: 100,
        scopedSlots: { customRender: 'personPensionAmt' },
      },
    ],
  },
  {
    title: '失业',
    children: [
      {
        title: '失业基数',
        dataIndex: 'companyUnemploymentInsuranceBase',
        key: 'companyUnemploymentInsuranceBase',
        width: 100,
        scopedSlots: { customRender: 'companyUnemploymentInsuranceBase' },
      },
      {
        title: '公司比例',
        dataIndex: 'companyUnemploymentInsurancePercent',
        key: 'companyUnemploymentInsurancePercent',
        width: 100,
        scopedSlots: { customRender: 'companyUnemploymentInsurancePercent' },
      },
      {
        title: '公司金额',
        dataIndex: 'companyUnemploymentInsuranceAmt',
        key: 'companyUnemploymentInsuranceAmt',
        width: 100,
        scopedSlots: { customRender: 'companyUnemploymentInsuranceAmt' },
      },
      {
        title: '个人比例',
        dataIndex: 'personUnemploymentInsurancePercent',
        key: 'personUnemploymentInsurancePercent',
        width: 100,
        scopedSlots: { customRender: 'personUnemploymentInsurancePercent' },
      },
      {
        title: '个人金额',
        dataIndex: 'personUnemploymentInsuranceAmt',
        key: 'personUnemploymentInsuranceAmt',
        width: 100,
        scopedSlots: { customRender: 'personUnemploymentInsuranceAmt' },
      },
    ],
  },
  {
    title: '医疗',
    children: [
      {
        title: '医疗基数',
        dataIndex: 'companyMedicalInsuranceBase',
        key: 'companyMedicalInsuranceBase',
        width: 100,
        scopedSlots: { customRender: 'companyMedicalInsuranceBase' },
      },
      {
        title: '公司比例',
        dataIndex: 'companyMedicalInsurancePercent',
        key: 'companyMedicalInsurancePercent',
        width: 100,
        scopedSlots: { customRender: 'companyMedicalInsurancePercent' },
      },
      {
        title: '公司金额',
        dataIndex: 'companyMedicalInsuranceAmt',
        key: 'companyMedicalInsuranceAmt',
        width: 100,
        scopedSlots: { customRender: 'companyMedicalInsuranceAmt' },
      },
      {
        title: '医疗基数',
        dataIndex: 'personMedicalInsuranceBase',
        key: 'personMedicalInsuranceBase',
        width: 100,
        scopedSlots: { customRender: 'personMedicalInsuranceBase' },
      },
      {
        title: '个人比例',
        dataIndex: 'personMedicalInsurancePercent',
        key: 'personMedicalInsurancePercent',
        width: 100,
        scopedSlots: { customRender: 'personMedicalInsurancePercent' },
      },
      {
        title: '个人金额',
        dataIndex: 'personMedicalInsuranceAmt',
        key: 'personMedicalInsuranceAmt',
        width: 100,
        scopedSlots: { customRender: 'personMedicalInsuranceAmt' },
      },
    ]
  },
  {
    title: '工伤',
    children: [
      {
        title: '工伤基数',
        dataIndex: 'compInjuryInsuranceBase',
        key: 'compInjuryInsuranceBase',
        width: 100,
        scopedSlots: { customRender: 'compInjuryInsuranceBase' },
      },
      {
        title: '公司比例',
        dataIndex: 'compInjuryInsurancePercent',
        key: 'compInjuryInsurancePercent',
        width: 100,
        scopedSlots: { customRender: 'compInjuryInsurancePercent' },
      },
      {
        title: '公司金额',
        dataIndex: 'compInjuryInsuranceAmt',
        key: 'compInjuryInsuranceAmt',
        width: 100,
        scopedSlots: { customRender: 'compInjuryInsuranceAmt' },
      },
    ]
  },
  {
    title: '生育',
    children: [
      {
        title: '生育基数',
        dataIndex: 'compMaternityInsuranceBase',
        key: 'compMaternityInsuranceBase',
        width: 100,
        scopedSlots: { customRender: 'compMaternityInsuranceBase' },
      },
      {
        title: '公司比例',
        dataIndex: 'compMaternityInsurancePercent',
        key: 'compMaternityInsurancePercent',
        width: 100,
        scopedSlots: { customRender: 'compMaternityInsurancePercent' },
      },
      {
        title: '公司金额',
        dataIndex: 'compMaternityInsuranceAmt',
        key: 'compMaternityInsuranceAmt',
        width: 100,
        scopedSlots: { customRender: 'compMaternityInsuranceAmt' },
      },
    ]
  },
  {
    title: '大病公司',
    dataIndex: 'companyCriticalIllnessInsuranceAmt',
    key: 'companyCriticalIllnessInsuranceAmt',
    width: 100,
    scopedSlots: { customRender: 'companyCriticalIllnessInsuranceAmt' },
  },
  {
    title: '大病个人',
    dataIndex: 'personCriticalIllnessInsuranceAmt',
    key: 'personCriticalIllnessInsuranceAmt',
    width: 100,
    scopedSlots: { customRender: 'personCriticalIllnessInsuranceAmt' },
  },
  {
    title: '残保金',
    dataIndex: 'companyDisabilityAmt',
    key: 'companyDisabilityAmt',
    width: 100,
    scopedSlots: { customRender: 'companyDisabilityAmt' },
  },
  {
    title: '社保合计公司',
    dataIndex: 'companySocialTotal',
    key: 'companySocialTotal',
    width: 120,
    scopedSlots: { customRender: 'companySocialTotal' },
  },
  {
    title: '社保合计个人',
    dataIndex: 'personSocialTotal',
    key: 'personSocialTotal',
    width: 120,
    scopedSlots: { customRender: 'personSocialTotal' },
  },
  {
    title: '社保合计',
    dataIndex: 'socialTotal',
    key: 'socialTotal',
    width: 100,
    scopedSlots: { customRender: 'socialTotal' },
  },
  {
    title: '公积金',
    children: [
      {
        title: '公司基数',
        dataIndex: 'companyFundBase',
        key: 'companyFundBase',
        width: 100,
        scopedSlots: { customRender: 'companyFundBase' },
      },
      {
        title: '公司比例',
        dataIndex: 'companyFundPercent',
        key: 'companyFundPercent',
        width: 100,
        scopedSlots: { customRender: 'companyFundPercent' },
      },
      {
        title: '公司金额',
        dataIndex: 'companyFundAmt',
        key: 'companyFundAmt',
        width: 100,
        scopedSlots: { customRender: 'companyFundAmt' },
      },
      {
        title: '个人基数',
        dataIndex: 'personFundGBase',
        key: 'personFundGBase',
        width: 100,
        scopedSlots: { customRender: 'personFundGBase' },
      },
      {
        title: '个人比例',
        dataIndex: 'personFundpercent',
        key: 'personFundpercent',
        width: 100,
        scopedSlots: { customRender: 'personFundpercent' },
      },
      {
        title: '个人金额',
        dataIndex: 'personFundAmt',
        key: 'personFundAmt',
        width: 100,
        scopedSlots: { customRender: 'personFundAmt' },
      },
    ]
  },
  {
    title: '公积金总计',
    dataIndex: 'fundTotal',
    key: 'fundTotal',
    width: 100,
    scopedSlots: { customRender: 'fundTotal' },
  },
  {
    title: '其他费用(公司)',
    dataIndex: 'companyOtherCost',
    key: 'companyOtherCost',
    width: 120,
    scopedSlots: { customRender: 'companyOtherCost' },
  },
  {
    title: '其他费用(个人)',
    dataIndex: 'personOtherCost',
    key: 'personOtherCost',
    width: 120,
    scopedSlots: { customRender: 'personOtherCost' },
  },
  {
    title: '公司合计',
    dataIndex: 'companyTotal',
    key: 'companyTotal',
    width: 100,
    scopedSlots: { customRender: 'companyTotal' },
  },
  {
    title: '个人合计',
    dataIndex: 'personTotal',
    key: 'personTotal',
    width: 100,
    scopedSlots: { customRender: 'personTotal' },
  },
  {
    title: '福利合计',
    dataIndex: 'welfareTotal',
    key: 'welfareTotal',
    width: 100,
    scopedSlots: { customRender: 'welfareTotal' },
  },
];

const columnsArr = [
  'signEntityName',
  'projectName',
  'projectContactType',
  'deptName',
  'type',
  'name',
  'idCard',
  'paymentCityName',
  'entryDate',
  'dimissionDate',
  'billMonth',
  'boonMonth',
  'companyPensionBase',
  'companyPensionPercent',
  'companyPensionAmt',
  'personPensionPercent',
  'personPensionAmt',
  'companyUnemploymentInsuranceBase',
  'companyUnemploymentInsurancePercent',
  'companyUnemploymentInsuranceAmt',
  'personUnemploymentInsurancePercent',
  'personUnemploymentInsuranceAmt',
  'companyMedicalInsuranceBase',
  "companyMedicalInsurancePercent",
  "companyMedicalInsuranceAmt",
  "personMedicalInsuranceBase",
  "personMedicalInsurancePercent",
  "personMedicalInsuranceAmt",
  "compInjuryInsuranceBase",
  "compInjuryInsurancePercent",
  "compInjuryInsuranceAmt",
  "compMaternityInsuranceBase",
  "compMaternityInsurancePercent",
  "compMaternityInsuranceAmt",
  "companyCriticalIllnessInsuranceAmt",
  "personCriticalIllnessInsuranceAmt",
  "companyDisabilityAmt",
  "companySocialTotal",
  "personSocialTotal",
  "socialTotal",
  "companyFundBase",
  "companyFundPercent",
  "companyFundAmt",
  "personFundGBase",
  "personFundpercent",
  "personFundAmt",
  "fundTotal",
  "companyOtherCost",
  "personOtherCost",
  "companyTotal",
  "personTotal",
  "welfareTotal"
]

export default {
  data () {
    return {
      cityData: [],
      iptform: {
        cityId: null,
        month: '',
        pro: undefined,
        supplier: undefined
      },
      proNameDataObj: {},
      supplierNameArr: [],
      data: [],
      columns,
      columnsArr,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      uploadFileLoading: false,
      datePickerHasChange: 0,
      proSelectLoading: false
    }
  },
  components: { Vcity, PageLayout },
  mounted () {
    this.getCityIvk()
  },
  watch: {
    'iptform.month' (n, o) {
      n ? this.datePickerHasChange = 1 : this.datePickerHasChange = 0
    }
  },
  computed: {
    isDisabled () {
      let _flag1 = 0
      let _flag2 = 0
      this.datePickerHasChange == 0 ? _flag1 = 0 : _flag1 = 1
      this.iptform.pro == undefined ? _flag2 = 0 : _flag2 = 1

      if (_flag1 + _flag2 == 2) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    onPageChange (page, pageSize) {
      this.pageNum = page
      this.pageSize = pageSize
      this.getList()
    },

    onSizeChange (current, size) {
      this.pageNum = 1
      this.pageSize = size
      this.getList()
    },

    getList () {
      let {
        cityId,
        month,
        pro,
        supplier
      } = this.iptform

      let _month = month.indexOf('-') != -1 ? month.replace('-', '') : ''

      let params = {
        billMonth: _month,
        projectId: pro,
        supplierId: supplier,
        employeeCityId: cityId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }

      this.loading = true
      getRemittanceDetailsPageApi(params).then(res => {
        this.loading = false
        let { code, msg, data } = res.data

        if (code === 200) {
          this.data = data.content
          this.pageNum = data.pageNum
          this.pageSize = data.pageSize
          this.total = data.totalElements
        } else {
          this.$message.error(msg)
        }
      })
    },

    monthPickerOnChange (date, dateString) {
      this.datePickerHasChange = 1
      this.iptform.month = dateString
    },

    proHandleFocus () {
      this.proSelectLoading = true
      proNameBaseSelectApi().then(res => {
        this.proSelectLoading = false
        let { code, data, msg } = res.data
        if (code === 200) {
          this.proNameDataObj = data.project
        } else {
          this.$message.error(msg)
        }
      })
    },

    getCityIvk () {
      getAllCityApi().then(res => {
        let { code, data, msg } = res.data
        if (code === 200) {
          this.cityData = data
        } else {
          this.$message.error(msg)
        }
      })
    },

    selectDepCity (data) {
      this.iptform.cityId = data.id
    },

    supplierHandleFocus () {
      findSupplierInfoApi().then(res => {
        let { code, data, msg } = res.data
        if (code === 200) {
          this.supplierNameArr = data
        } else {
          this.$message.error(msg)
        }
      })
    },

    onSearch () {
      if (!this.iptform.month) {
        this.$message.error('请选择月份')
        return
      }

      if (!this.iptform.pro) {
        this.$message.error('请选择项目名称')
        return
      }

      if (_idx == 1) {
        this.getList()
      } else {
        this.getListTwo()
      }

    },

    downloadBtnClkFn () {
      let {
        cityId,
        month,
        pro,
        supplier
      } = this.iptform

      let _month = month.indexOf('-') != -1 ? month.replace('-', '') : ''

      let params = {
        billMonth: _month,
        projectId: pro,
        supplierId: supplier,
        employeeCityId: cityId
      }

      this.uploadFileLoading = true
      exportRemittanceDetailsApi(params).then(res => {
        this.uploadFileLoading = false
      })
    },

    radioChangeFn (event) {
      _idx = event.target.value


      if (_idx == 1) {
        this.getList()
      } else {
        this.getListTwo()
      }
    },

    getListTwo () {
      let {
        cityId,
        month,
        pro,
        supplier
      } = this.iptform

      let _month = month.indexOf('-') != -1 ? month.replace('-', '') : ''

      let params = {
        billMonth: _month,
        projectId: pro,
        supplierId: supplier,
        employeeCityId: cityId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }

      getAdjustmentDetailsPageApi(params).then(res => {
        let { code, msg, data } = res.data

        if (code === 200) {
          this.data = data.content
        } else {
          this.$message.error(msg)
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.billCity {
  width: 200px;
  background: #fff !important;
}
.tips {
  margin-left: 16px;
  color: red;
}
</style>
